// import { Link as RRLink } from "react-router-dom";
import React from "react";
import { Link as RouterLink } from "react-router-dom";

// const Link = React.forwardRef(({ onClick, ...rest }, ref) => {
//   const [startTransition] = React.useTransition();

//   const handleClick = (event) => {
//     startTransition(() => {
//       if (onClick) {
//         onClick(event);
//       }
//     });
//   };

//   return <RRLink ref={ref} onClick={handleClick} {...rest} />;
// });

// export default Link;

const CustomLink = React.forwardRef(
  ({ to, children, onClick, ...rest }, ref) => {
    let [startTransition, isPending] = React.useTransition();

    function handleClick(e) {
      startTransition(() => {
        if (onClick) {
          onClick(e);
        }
        // 常规导航
        window.location.href = to;
      });
    }

    return (
      <RouterLink ref={ref} to={to} onClick={handleClick} {...rest}>
        {children}
        {isPending && "..."} {/*可在导航item后添加加载标识*/}
      </RouterLink>
    );
  }
);

export default CustomLink;
